<template>
  <div
    class="filter-panel bg-white rounded-lg shadow-md p-4 space-y-4 h-full w-64 overflow-auto"
    :class="{ 'dark-mode': isDark }"
  >
    <h3 class="text-lg font-semibold">筛选条件</h3>

    <!-- 政策级别筛选 -->
    <div>
      <h4 class="font-medium mb-1">政策级别</h4>
      <div class="space-y-1">
        <div v-for="level in levelOptions" :key="level">
          <label class="inline-flex items-center">
            <input
              type="checkbox"
              class="form-checkbox"
              :value="level"
              v-model="localFilters.levels"
            />
            <span class="ml-2">{{ level }}</span>
          </label>
        </div>
      </div>
    </div>

    <!-- 关键词搜索 -->
    <div>
      <h4 class="font-medium mb-1">关键词</h4>
      <input
        type="text"
        v-model="localFilters.keyword"
        placeholder="输入关键词"
        class="form-input w-full"
      />
    </div>

    <!-- 相关度筛选 -->
    <div>
      <h4 class="font-medium mb-1">相关度范围</h4>
      <div class="flex space-x-2 items-center">
        <input
          type="number"
          v-model.number="localFilters.relevanceMin"
          placeholder="最小值"
          class="form-input w-1/2"
          min="0"
          max="1"
          step="0.01"
        />
        <span>-</span>
        <input
          type="number"
          v-model.number="localFilters.relevanceMax"
          placeholder="最大值"
          class="form-input w-1/2"
          min="0"
          max="1"
          step="0.01"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, watch,computed } from 'vue'
import {themeState} from '@/services/themeService.js'

export default {
  name: 'FilterPanel',
  props: {
    filters: {
      type: Object,
      required: true,
    },
  },
  emits: ['update:filters'],
  setup(props, { emit }) {
    const levelOptions = ['国家', '省级', '市级','区级']

    const localFilters = ref({ ...props.filters })

    watch(
      localFilters,
      (newVal) => {
        const cloned = JSON.parse(JSON.stringify(newVal))
        const min = typeof cloned.relevanceMin === 'number' ? cloned.relevanceMin : null
        const max = typeof cloned.relevanceMax === 'number' ? cloned.relevanceMax : null
        if (min !== null && max !== null && max < min) {
          cloned.relevanceMax = min
        }

        emit('update:filters', cloned)
      },
      { deep: true, immediate: true }
    )

    const isDark = computed(() => themeState.isDark)

    return {
      levelOptions,
      localFilters,
      isDark
    }
  },
}
</script>

<style scoped>
.filter-panel {
  background-color: var(--color-primary);
  color: var(--color-textPrimary);
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  overflow-y: auto;
}

.form-input {
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  color: var(--color-textPrimary);
  background-color: var(--color-surface);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.3s;
}
.form-input::placeholder {
  color: var(--color-textSecondary);
}

.form-checkbox {
  accent-color: var(--color-accent);
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.flex > span {
  color: var(--color-textSecondary);
  font-weight: 600;
  user-select: none;
}

.dark-mode {
  box-shadow: 0 4px 8px rgba(0, 115, 230, 0.3);
}
</style>
